10 Listas

Nota: Este documento es parte de una traducci�n al castellano de la Recomendaci�n del W3C "HTML 4.01 Specification" (m�s informaci�n). Puede consultar la versi�n original del mismo. Para cualquier comentario o correcci�n acerca de la traducci�n p�ngase en contacto con el traductor en jrpozo arroba conclase punto net. Gracias por su colaboraci�n.

V�ase el Aviso de copyright de la traducci�n.

Contenidos

  1. Introducci�n a las listas
  2. Listas no ordenadas (UL), listas ordenadas (OL) y objetos de lista (LI)
  3. Listas de definiciones: los elementos DL, DT y DD
    1. Representaci�n visual de las listas
  4. Los elementos DIR y MENU

10.1 Introducci�n a las listas

HTML ofrece a los autores varios mecanismos para especificar listas de informaci�n. Todas las listas deben contener uno o m�s objetos de lista. Las listas pueden contener:

La lista anterior, por ejemplo, es una lista no ordenada, creada con el elemento UL:

<UL>
<LI>Informaci�n no ordenada. 
<LI>Informaci�n ordenada. 
<LI>Definiciones. 
</UL>

Una lista ordenada, creada por medio del elemento OL, deber�a contener informaci�n para la cual debe ponerse �nfasis en el orden, como en una receta de cocina:

  1. Mezcle los ingredientes secos �ntimamente.
  2. Vierta los ingredientes l�quidos.
  3. Remueva durante 10 minutos.
  4. Hornee durante una hora a 300 grados.

Las listas de definiciones, creadas por medio del elemento DL, consisten generalmente en una serie de parejas t�rmino/definici�n (si bien las listas de definiciones pueden tener otras aplicaciones). Por ejemplo, se podr�a usar una lista de definiciones en la publicidad de un producto:

Menor coste
�La nueva versi�n de este producto cuesta mucho menos que la versi�n anterior!
M�s f�cil de usar
�Hemos cambiado el producto para que sea mucho m�s f�cil de usar!
Seguro para los ni�os
Puede dejar a sus hijos solos en una habitaci�n con este producto y no se har�n da�o (no lo garantizamos).

Esto se define en HTML como sigue:

<DL>
<DT><STRONG>Menor coste</STRONG>
<DD>�La nueva versi�n de este producto cuesta mucho menos que la versi�n anterior!
<DT><STRONG>M�s f�cil de usar</STRONG>
<DD>�Hemos cambiado el producto para que sea mucho m�s f�cil de usar!
<DT><STRONG>Seguro para los ni�os</STRONG>
<DD>Puede dejar a sus hijos solos en una habitaci�n con este producto
    y no se har�n da�o (no lo garantizamos).
</DL>

Las listas pueden adem�s estar anidadas, pudiendo usarse al mismo tiempo tipos diferentes de listas, como en el ejemplo siguiente, que es una lista de definiciones que contiene una lista no ordenada (los ingredientes) y una lista ordenada (los pasos a seguir):

Ingredientes:
Pasos a seguir:
  1. Mezcle los ingredientes secos �ntimamente.
  2. Vierta los ingredientes l�quidos.
  3. Remueva durante 10 minutos.
  4. Hornear durante una hora a 300 grados.
Notas:
Puede a�adir uvas para mejorar la receta.

La presentaci�n exacta de los tres tipos de listas depende del agente de usuario. Desaconsejamos a los autores el uso de listas �nicamente con el fin de dar sangr�a al texto. �ste es un aspecto estil�stico que se se resuelve apropiadamente con hojas de estilo.

10.2 Listas no ordenadas (UL), listas ordenadas (OL) y objetos de lista (LI)

<!ELEMENT UL - - (LI)+                 -- lista no ordenada -->
<!ATTLIST UL
  %attrs;                              -- %coreattrs, %i18n, %events --
  >
<!ELEMENT OL - - (LI)+                 -- lista ordenada -->
<!ATTLIST OL
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Etiqueta inicial: obligatoria, Etiqueta final: obligatoria

<!ELEMENT LI - O (%flow;)*             -- objeto de lista -->
<!ATTLIST LI
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Etiqueta inicial: obligatoria, Etiqueta final: opcional

Definiciones de atributos

type  =  informaci�n de estilo [CI]
Desaprobado. Este atributo especifica el estilo de un objeto de lista. Los valores disponibles son para los agentes de usuario visuales. Los valores posibles se describen m�s abajo (junto con la informaci�n sobre las diferencias entre may�sculas y min�sculas).
start = number [CN]
Desaprobado. S�lo para OL. Este atributo especifica el n�mero del primer objeto de una lista ordenada. El n�mero inicial por defecto es el "1". Obs�rvese que si bien el valor de este atributo es un entero, el r�tulo correspondiente puede no ser num�rico. As�, por ejemplo, cuando el estilo de objeto de lista es de letras latinas may�sculas (A, B, C, ...), start=3 significa "C". Cuando el estilo es de numerales romanos en min�sculas, start=3 significa "iii", etc.
value = number [CN]
Desaprobado. S�lo para LI. Este atributo establece el n�mero del objeto de lista actual. Obs�rvese que si bien el valor de este atributo es un entero, el r�tulo correspondiente puede no ser num�rico (v�ase el atributo start).
compact [CI]
Desaprobado. Si est� establecido, este atributo booleano indica a los agentes de usuario visuales que representen la lista de un modo m�s compacto. La interpretaci�n de este atributo depende del agente de usuario.

Atributos definidos en otros lugares

Las listas ordenadas y las no ordenadas se representan de id�ntica manera, excepto en que los agentes de usuario visuales numeran los objetos de las listas ordenadas. Los agentes de usuario pueden presentar estos n�meros de diferentes formas. Las listas no ordenadas no se numeran.

Ambos tipos de lista se componen de secuencias de objetos de lista definidos por el elemento LI (cuya etiqueta final puede omitirse).

Este ejemplo ilustra la estructura b�sica de una lista.

<UL>
   <LI> ... primer objeto de lista...
   <LI> ... segundo objeto de lista...
   ...
</UL>

Las listas pueden adem�s estar anidadas:

EJEMPLO DESAPROBADO:

<UL>
     <LI> ... Nivel uno, n�mero uno...
     <OL> 
        <LI> ... Nivel dos, n�mero uno...
        <LI> ... Nivel dos, n�mero dos...
        <OL start="10"> 
           <LI> ... Nivel tres, n�mero uno...
        </OL> 
        <LI> ... Nivel dos, n�mero tres...
     </OL> 
     <LI> ... Nivel uno, n�mero dos...
</UL>

Detalles sobre el orden de los n�meros. En las listas ordenadas, no es posible reanudar autom�ticamente la numeraci�n de una lista donde acab� una lista anterior, as� como tampoco ocultar la numeraci�n para un objeto de la lista. Sin embargo, los autores pueden inicializar el n�mero de un objeto de la lista estableciendo su atributo value. La numeraci�n de los objetos de lista subsiguientes contin�a a partir del nuevo valor. Por ejemplo:

<ol>
<li value="30"> hace que �ste sea el objeto de lista n�mero 30.
<li value="40"> hace que �ste sea el objeto de lista n�mero 40.
<li> hace que �ste sea el objeto de lista n�mero 41.
</ol>

10.3 Listas de definiciones: los elementos DL, DT y DD

<!-- listas de definiciones - DT para el t�rmino, DD para su definici�n -->

<!ELEMENT DL - - (DT|DD)+              -- lista de definiciones -->
<!ATTLIST DL
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Etiqueta inicial: obligatoria, Etiqueta final: obligatoria

<!ELEMENT DT - O (%inline;)*           -- t�rmino definido -->
<!ELEMENT DD - O (%flow;)*             -- descripci�n de la definici�n -->
<!ATTLIST (DT|DD)
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Etiqueta inicial: obligatoria, Etiqueta final: opcional

Atributos definidos en otros lugares

Las listas de definiciones s�lo difieren levemente de los otros tipos de listas, en que los objetos de lista consisten en dos partes: un t�rmino y una descripci�n. El t�rmino viene dado por el elemento DT y est� restringido a contenido en l�nea. La descripci�n viene dada por un elemento DD que contiene contenido en bloque.

Aqu� tenemos un ejemplo:

  
<DL>
  <DT>Dweeb
  <DD>persona joven y excitable que puede madurar y convertirse
      en un <EM>Nerd</EM> o en un <EM>Geek</EM>

  <DT>Hacker
  <DD>un programador inteligente

  <DT>Nerd
  <DD>t�cnicamente brillante pero socialmente in�til

</DL>

Aqu� tenemos un ejemplo con t�rminos y definiciones m�ltiples:

<DL>
   <DT>Center
   <DT>Centre
   <DD> A point equidistant from all points
        on the surface of a sphere.
   <DD> In some field sports, the player who
        holds the middle position on the field, court,
        or forward line.
</DL>

Otra aplicaci�n de DL es, por ejemplo, dar formato a un di�logo, de modo que cada DT identifica al hablante, y cada DD contiene sus palabras.

10.3.1 Representaci�n visual de las listas

Nota. Lo que sigue es una descripci�n informativa del comportamiento de algunos agentes de usuario visuales al dar formato a las listas. Las hojas de estilo permiten un mejor control sobre formato de las listas (p.ej., su numeraci�n, convenciones dependientes del idioma, sangr�as, etc.).

Los agentes de usuario visuales suelen sangrar la listas anidadas seg�n su nivel de anidamiento.

Tanto para OL como para UL, el atributo type especifica las opciones de representaci�n para los agentes de usuario visuales.

Para el elemento UL, los valores posibles del atributo type son disc (disco), square (cuadrado), y circle (c�rculo). El valor por defecto depende del nivel de anidamiento de la lista actual. Estos valores no distinguen entre may�sculas y min�sculas.

El modo en que se presenta cada valor depende del agente de usuario. Los agentes de usuario deber�an intentar presentar un "disc" como un peque�o c�rculo relleno, un "circle" como un peque�o c�rculo vac�o, y un "square" como un peque�o cuadrado vac�o.

Un agente de usuario gr�fico podr�a hacer las siguientes representaciones:

Una posible representaci�n de un discopara el valor "disc"
Una posible representaci�n de un c�rculopara el valor "circle"
Una posible representaci�n de un cuadradopara el valor "square"

Para el elemento OL, los valores posibles del atributo type se resumen en la siguiente tabla (la diferencia entre may�sculas y min�sculas es importante):

Tipo Estilo de numeraci�n
1 n�meros ar�bigos 1, 2, 3, ...
a alfab�tica en min�sculas a, b, c, ...
A alfab�tica en may�sculas A, B, C, ...
i n�meros romanos en min�sculas i, ii, iii, ...
I n�meros romanos en may�sculas I, II, III, ...

Obs�rvese que el atributo type est� desaprobado y que los estilos de las listas deber�an especificarse mediante hojas de estilo.

Por ejemplo, usando CSS se puede especificar que el estilo de los n�meros de los objetos de lista de una lista numerada deber�a ser numerales romanos en min�sculas. En el extracto de a continuaci�n, todos los elementos OL que pertenezcan a la clase "conromanos" tendr�n numerales romanos delante de los objetos de la lista.

<STYLE type="text/css">
OL.conromanos { list-style-type: lower-roman }
</STYLE>
<BODY>
<OL class="conromanos">
<LI> Paso uno ...  
<LI> Paso dos ...
</OL>
</BODY>

La representaci�n de una lista de definiciones tambi�n depende del agente de usuario. El ejemplo:

<DL>
  <DT>Dweeb
  <DD>persona joven y excitable que puede madurar y convertirse
      en un <EM>Nerd</EM> o un <EM>Geek</EM>

  <DT>Hacker
  <DD>un programador inteligente

  <DT>Nerd
  <DD>t�cnicamente brillante pero socialmente in�til
</DL>

podr�a representarse como sigue:

Dweeb
       persona joven y excitable que puede madurar y convertirse en un Nerd o un Geek
Hacker
       un programador inteligente
Nerd
       t�cnicamente brillante pero socialmente in�til

10.4 Los elementos DIR y MENU

DIR y MENU est�n desaprobados.

V�ase el DTD Transicional para su definici�n formal.

Atributos definidos en otros lugares

El elemento DIR fue dise�ado para crear listas multicolumna de directorios. El elemento MENU fue dise�ado para listas de men� de una sola columna. Ambos elementos tienen la misma estructura que UL, y �nicamente var�a su representaci�n. En la pr�ctica, un agente de usuario representar� una lista DIR o MENU exactamente igual que una lista UL.

Recomendamos encarecidamente usar UL en lugar de estos elementos.